<script>

import * as echarts from 'echarts';
export default {
  name: 'VisualizationEight',
  data() {
    return{

    }
  },
  mounted() {
    this.getData();
  },
  methods:{open1(msg) {
      this.$notify({
        title: msg,
        message: '这是一条成功的提示消息',
        type: 'success'
      });
    },
    open2(msg) {
      this.$notify({
        title: msg,
        message: '这是一条警告的提示消息',
        type: 'warning'
      });
    },
    open4(msg) {
      this.$notify.error({
        title: msg,
        message: '这是一条错误的提示消息'
      });
    },
    getData(){
      let data1 = [];
      let data2 = [];
      let data3 = [];
      this.$axios.get('/api/vis/getData12', {

      }).then(res =>{

        if (res.data.code === 20041) {
          for (let i = 0; i < res.data.data.length; i++) {
            data1.push(
                { name: res.data.data[i]["param"], value: parseInt(res.data.data[i]["param1"]) },
            );
          }
        }

      }).catch(error =>{
        error = "系统出错了"
        this.open4(error)
      });

      this.$axios.get('/api/vis/getData13', {

      }).then(res =>{

        if (res.data.code === 20041) {
          for (let i = 0; i < res.data.data.length; i++) {
            data2.push(
                { name: res.data.data[i]["param"], value: parseInt(res.data.data[i]["param1"]) },
            );
          }
        }

      }).catch(error =>{
        error = "系统出错了"
        this.open4(error)
      });

      this.$axios.get('/api/vis/getData15', {

      }).then(res =>{

        if (res.data.code === 20041) {
          for (let i = 0; i < res.data.data.length; i++) {
            data3.push(
                { name: res.data.data[i]["param"], value: parseInt(res.data.data[i]["param1"]) },
            );
          }
        }

      }).catch(error =>{
        error = "系统出错了"
        this.open4(error)
      });
      this.init();
    },

    init() {

      var chartDom = document.getElementById('main-box8');
      var myChart = echarts.init(chartDom);
      var option;

      var datas = [

          [
              {name: '暂无数据', value: 3657},
              {name: '商水', value: 1177},
              {name: '民水', value: 25745}
          ],
          [
              {name: '暂无数据', value: 2563},
              {name: '民电', value: 25697},
              {name: '商电', value: 2319}
          ],
          [
              {name: '暂无数据', value: 20551},
              {name: '自采暖', value: 7591},
              {name: '集中供暖', value: 2437}
          ]

      ];
      option = {
        title: {
          text: '用水/用电/供暖',
          left: 'center',
          textStyle: {
            color: '#999',
            fontWeight: 'normal',
            fontSize: 14
          }
        },
        series: datas.map(function (data, idx) {
          var top = idx * 33.3;
          return {
            type: 'pie',
            radius: [20, 60],
            top: top + '%',
            height: '33.33%',
            left: 'center',
            width: 400,
            itemStyle: {
              borderColor: '#fff',
              borderWidth: 1
            },
            label: {
              alignTo: 'edge',
              formatter: '{name|{b}}\n{time|{c} 小时}',
              minMargin: 5,
              edgeDistance: 10,
              lineHeight: 15,
              rich: {
                time: {
                  fontSize: 10,
                  color: '#999'
                }
              }
            },
            labelLine: {
              length: 15,
              length2: 0,
              maxSurfaceAngle: 80
            },
            labelLayout: function (params) {
              const isLeft = params.labelRect.x < myChart.getWidth() / 2;
              const points = params.labelLinePoints;
              // Update the end point.
              points[2][0] = isLeft
                  ? params.labelRect.x
                  : params.labelRect.x + params.labelRect.width;
              return {
                labelLinePoints: points
              };
            },
            data: data
          };
        })
      };

      option && myChart.setOption(option);


    }
  }
}

</script>

<template>
  <div id="main-box8"></div>
</template>

<style scoped>
#main-box8 {
  height: 100%;
  width: 100%;
}
</style>